<!-- 婚礼客片 -->
<template>
  <div class="guest">
    <div class="guest-content">
      <div class="guest-title">
        <div class="title1">新人案例</div>
        <div class="title2" style="margin-left: 12px">分享幸福时刻</div>
      </div>
      <div class="guest-video"></div>
      <div class="list-item" v-for="(item, index) in tabList" :key="index">
        <div>
          <guestItme :detail="item"></guestItme>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import guestItme from "@/components/guest/guestItem.vue";
import imgUrl1 from "@img/guest/圣诺莉官网—首页_02-05.png";
import imgUrl2 from "@img/guest/圣诺莉官网—首页_02-08.png";
import imgUrl3 from "@img/guest/圣诺莉官网—首页_02-10.png";
import imgUrl4 from "@img/guest/圣诺莉官网—首页_02-12.png";
import imgUrl5 from "@img/guest/圣诺莉官网—首页_02-14.png";

export default {
  data() {
    return {
      tabList: [
        {
          title: "宫殿古堡",
          num: 100,
          height: 10,
          imgUrl: imgUrl1,
        },
        {
          title: "海洋之谜",
          num: 100,
          height: 10,
          imgUrl: imgUrl2,
        },
        {
          title: "杜乐丽花园",
          num: 100,
          height: 10,
          imgUrl: imgUrl3,
        },
        {
          title: "暮光森林",
          num: 100,
          height: 10,
          imgUrl: imgUrl4,
        },
        {
          title: "云中长安",
          num: 100,
          height: 10,
          imgUrl: imgUrl5,
        },
      ],
    };
  },
  components: { guestItme },
  mounted() {},
  computed: {},
  methods: {},
};
</script>
<style scoped lang="less">
@import url("@css/index");

.guest {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 100px;
  .guest-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    // justify-content: center;
    .guest-title {
      display: flex;
      align-items: baseline;
      margin-bottom: 10px;
      .title1 {
        font-size: 30px;
      }
    }
    .guest-video {
      width: 1080px;
      height: 490px;
      margin-bottom: 20px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    }
    .list-item {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 20px;
    }
    .list-item:nth-child(even) {
      background: #f0eee4;
    }
  }
}
</style>
